<template>
  <div class="signal-monitor-container">
    <!-- 统计卡片区域 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon signal-icon">📡</div>
            <div class="stat-info">
              <div class="stat-value">{{ stats.total || 0 }}</div>
              <div class="stat-label">总信号记录</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon strength-icon">📶</div>
            <div class="stat-info">
              <div class="stat-value">{{ stats.avgSignalStrength ? stats.avgSignalStrength.toFixed(2) + ' dBm' : '--' }}</div>
              <div class="stat-label">平均信号强度</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon latency-icon">⏱️</div>
            <div class="stat-info">
              <div class="stat-value">{{ latestSignal?.latency || '--' }} ms</div>
              <div class="stat-label">最新延迟</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon packet-icon">📦</div>
            <div class="stat-info">
              <div class="stat-value">{{ latestSignal?.packetLoss ? latestSignal.packetLoss.toFixed(2) + '%' : '--' }}</div>
              <div class="stat-label">最新丢包率</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 搜索区域 -->
    <el-card class="search-card">
      <el-form :model="queryParams" :inline="true">
        <el-form-item label="设备ID">
          <el-input
            v-model="queryParams.deviceId"
            placeholder="请输入设备ID"
            clearable
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
            v-model="queryParams.startTime"
            type="datetime"
            placeholder="选择开始时间"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            v-model="queryParams.endTime"
            type="datetime"
            placeholder="选择结束时间"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch" :icon="Search">搜索</el-button>
          <el-button @click="handleReset" :icon="Refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 操作区域 -->
    <el-card class="operation-card">
      <div class="operation-buttons">
        <el-button type="primary" @click="handleRefresh" :icon="Refresh">采集数据</el-button>
        <el-button 
          type="danger" 
          @click="handleBatchDelete(selectedRows)" 
          :icon="Delete"
          :disabled="selectedRows.length === 0"
        >
          批量删除
        </el-button>
      </div>
    </el-card>

    <!-- 信号数据列表 -->
    <el-card>
      <el-table
        v-loading="loading"
        :data="signalList"
        @selection-change="handleSelectionChange"
        stripe
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="记录ID" width="100" />
        <el-table-column prop="deviceId" label="设备ID" width="100" />
        <el-table-column prop="signalStrength" label="信号强度" width="120">
          <template #default="{ row }">
            <el-tag :type="getSignalStrengthType(row.signalStrength)">
              {{ row.signalStrength }} dBm
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="snrRatio" label="信噪比" width="100">
          <template #default="{ row }">
            {{ row.snrRatio }} dB
          </template>
        </el-table-column>
        <el-table-column prop="bandwidth" label="带宽" width="80">
          <template #default="{ row }">
            {{ row.bandwidth }} MHz
          </template>
        </el-table-column>
        <el-table-column prop="latency" label="延迟" width="80">
          <template #default="{ row }">
            {{ row.latency }} ms
          </template>
        </el-table-column>
        <el-table-column prop="packetLoss" label="丢包率" width="100">
          <template #default="{ row }">
            <el-tag :type="getPacketLossType(row.packetLoss)">
              {{ row.packetLoss }}%
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="collectTime" label="采集时间" width="180">
          <template #default="{ row }">
            {{ formatTime(row.collectTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button 
              type="primary" 
              size="small" 
              @click="handleViewDetail(row)"
              :icon="View"
            >
              详情
            </el-button>
            <el-button 
              type="danger" 
              size="small" 
              @click="handleDelete(row)"
              :icon="Delete"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="queryParams.page"
          v-model:page-size="queryParams.size"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 信号详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="信号详情"
      width="600px"
    >
      <el-descriptions :column="2" border v-if="currentSignal">
        <el-descriptions-item label="记录ID">{{ currentSignal.id }}</el-descriptions-item>
        <el-descriptions-item label="设备ID">{{ currentSignal.deviceId }}</el-descriptions-item>
        <el-descriptions-item label="信号强度">{{ currentSignal.signalStrength }} dBm</el-descriptions-item>
        <el-descriptions-item label="信噪比">{{ currentSignal.snrRatio }} dB</el-descriptions-item>
        <el-descriptions-item label="带宽">{{ currentSignal.bandwidth }} MHz</el-descriptions-item>
        <el-descriptions-item label="延迟">{{ currentSignal.latency }} ms</el-descriptions-item>
        <el-descriptions-item label="丢包率">{{ currentSignal.packetLoss }}%</el-descriptions-item>
        <el-descriptions-item label="采集时间">{{ formatTime(currentSignal.collectTime) }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ formatTime(currentSignal.createTime) }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <el-button @click="detailDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { Search, Refresh, Delete, View } from '@element-plus/icons-vue'
import { useSignalMonitor } from '../hooks/useSignalMonitor.js'

// 使用信号监控hook
const {
  // 响应式数据
  loading,
  signalList,
  selectedRows,
  total,
  stats,
  latestSignal,
  detailDialogVisible,
  currentSignal,
  queryParams,
  
  // 方法
  handleSearch,
  handleReset,
  handleRefresh,
  handleSelectionChange,
  handleSizeChange,
  handleCurrentChange,
  handleViewDetail,
  handleDelete,
  handleBatchDelete,
  formatTime,
  getSignalStrengthType,
  getPacketLossType
} = useSignalMonitor()
</script>

<style scoped>
.signal-monitor-container {
  padding: 20px;
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  height: 120px;
}

.stat-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.stat-icon {
  font-size: 48px;
  margin-right: 20px;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

.search-card, .operation-card {
  margin-bottom: 20px;
}

.operation-buttons {
  display: flex;
  gap: 10px;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

/* 信号强度图标颜色 */
.signal-icon {
  color: #409EFF;
}

.strength-icon {
  color: #67C23A;
}

.latency-icon {
  color: #E6A23C;
}

.packet-icon {
  color: #F56C6C;
}
</style>